<template>
    <el-card style="height: 335px;">
        <div slot="header" class="header">
            <div class="search-header">
                <span>线上热门搜索</span>
                <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                        <i class="el-icon-more"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item,index) in list" :key="index">{{item}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div>
            <el-row :gutter="10">
                <el-col :span="12">
                    <lineCharts :datalist="datalist1"></lineCharts>
                </el-col>
                <el-col :span="12">
                    <lineCharts :datalist="datalist2"></lineCharts>
                </el-col>
            </el-row>
        </div>
        <!-- table表格 -->
        <el-table :data="tableData" style="width: 100%;margin-top: 10px;" border >
            <el-table-column align="center" prop="no" label="排名" width="80">
            </el-table-column>
            <el-table-column align="center" prop="keyword" label="搜索关键字" width="180">
            </el-table-column>
            <el-table-column align="center" prop="userNum" label="用户数" sortable>
            </el-table-column>
            <el-table-column align="center" prop="up" label="周涨幅" sortable>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script>
import lineCharts from './lineCharts'
export default {
    components: {
        lineCharts
    },
    data() {
        return {
            tableData: [
                {
                    no: 1,
                    keyword: '后台管理',
                    userNum: '10000+',
                    up: '15%'
                }
            ],
            list: ['全国','省内','同城','线上','线下'],
            datalist1: {
                title: '搜索用户数',
                num: 12871,               
                percentage: 17.1,
                chartsData: [230, 932, 701, 1804, 870, 930, 1320]
            },
            datalist2: {
                title: '人均搜索次数',
                num: 3.1,
                percentage: 26.2,
                chartsData: [300, 280, 300, 550, 500, 400, 390, 500, 600, 750, 800, 700, 600, 400]
            }
        }
    }
}
</script>

<style scoped>
.search-header {
    display: flex;
    justify-content: space-between;
}

.header {
    border-bottom: 2px solid #e4e7ed;
    padding: 10px 0;
}

.el-dropdown-link {
    cursor: pointer;
}
</style>